<!DOCTYPE html>
<html>
<head>
	<title> Search Test </title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<script src="jquery-1.9.0.js"  type="text/javascript"></script>
		<script src="js/three.min.js"></script>
	<script src="js/photo-sphere-viewer.min.js"></script>
	
	
	<style>
	html,body{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		background-color: #F9F9F9;
	}


.main {
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;}
.title{
	width: 100%;height: 50px;
}
.inner-left {
  bottom: 0;
  position: absolute;
  top: 50px;
  width: 50%;
  left: 0px;
}
.inner-right {
  bottom: 0;
  position: absolute;
  top: 50px;
  width: 50%;
  right: 0px;
}
.inner-if {
  height: 99%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.input-main {
  height: 20px;
  margin-left: 20px;
  width: 480px;
}
.ch{
	float: left; width: 49%; height: 100%;  
}

.turn ,.clear{
  background-color: #3485fb;
  background-repeat: no-repeat;
  border: 0 none;
  color: white;
  cursor: pointer;
  height: 32px;
  padding: 0;
  width: 106px;
}
.viceIframe{
	display: none;
}
	</style>
</head>

<body>
	<div class='main' style=''  id="container">

	</div>

<script type="text/javascript">
(function($, exports) {
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
			// Panorama, given in base 64
			panorama: '2f.jpg',

			// Container
			container: div,

			// Deactivate the animation
			time_anim: false,

			// Display the navigation bar
			navbar: true,
			
			max_fov:90,
			min_fov:30,
			tilt_up_max:Math.PI/2,

			// Resize the panorama
			size: {
				width: '100%',
				height: '500px'
			}
		});

})(jQuery, window);
</script>
</body>
</html>
